<template>
  <div class="e-wrap">
    <div class="e-filter-options clearfix">
      <div class="e-filter">
        <div class="e-item">
            <span class="title">广告位名称</span>
            <div class="date dis-block">
              <w-input :holder='`请填写`' v-model="queryAds.apTitle"></w-input>
            </div>
        </div>
      </div>
      <div class="e-btn">
        <w-button @on-click='changePage(1)'>搜索</w-button>
      </div>
    </div>
    <!-- 广告位列表 -->
    <div class="e-filter-list">
      <div class="e-add clearfix">
          <w-button @on-click='$router.push(`/advertMange/addPos?three=${$route.query.three}`)'>新增广告位</w-button>
      </div>
      <!-- 列表数据 -->
      <div class="e-list clearfix" v-if="adsList.totalCount">
        <table>
            <tr class="table-h">
              <th>广告位名称</th>
              <th>终端</th>
              <th>价格</th>
              <th>广告类型</th>
              <th>广告状态</th>
              <th>操作</th>
            </tr>
            <tr v-for='(val, index) in adsList.recordList' :key="index">
              <td>{{val.apTitle}}</td>
              <td>{{val.apLocation}}</td>
              <td>{{val.apPrice}}</td>
              <td v-if="val.apType == 'img'">图片</td>
              <td v-else-if="val.apType == 'slide'">幻灯片</td>
              <td v-else-if="val.apType == 'bg_slide'">背景幻灯片</td>
              <td v-else-if="val.apType == 'scroll'">滚动</td>
              <td v-else-if="val.apType == 'text'">文字</td>
              <td v-else></td>
              <td>{{val.apStatus == '1' ? '启用' : '不启用'}}</td>
              <td>
                <span class="cur" @click='$router.push(`/advertMange/addPos?three=${$route.query.three}&id=${val.id}`)'>编辑 |</span>
                <span class="cur" @click="delPanel = true; delParams.idList = [Number(val.id)]">删除</span>
              </td>
            </tr>
        </table>
        <!-- 分页 -->
        <div class="fr" style="margin-top: 55px">
          <w-paging :current="adsList.currentPage" :total="adsList.pageCount" @on-page='changePage'></w-paging>
        </div>
      </div>
      
      <!-- 无数据 -->
      <div class="e-list" v-else>
        <table>
            <tr class="table-h">
              <th>广告位名称</th>
              <th>类别</th>
              <th>价格</th>
              <th>广告类型</th>
              <th>广告状态</th>
              <th>操作</th>
            </tr>
            <tr>
              <td colspan='6'>暂无数据</td>
            </tr>
        </table>
      </div>
    </div>

    <!-- 删除广告位 -->
    <w-panel-fixed-wrap v-model="delPanel"  :panel-title="true" title="删除广告位" :width="`260px`" :height="`200px`" @on-confirm='delOption'>
      <div class="panel-classify">
        是否确认删除该广告位
      </div>
    </w-panel-fixed-wrap>
  </div>
</template>

<script>
import { apiDecorateMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      delPanel: false,
      // 查询广告位列表 -- 参数
      queryAds: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        apTitle: '',
        currentPage: 1,
        showCount: 10
      },
      adsList: [],
      // 删除 广告位 -- 参数
      delParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        idList: []
      }
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    this._getAdsList()
  },
  methods: {
    // 获取广告位列表
    _getAdsList() {
      this.queryAds.accessToken = this.token
      apiDecorateMange.getAdsList(this.queryAds).then(data => {
        if (data.code != 200) return
        this.adsList = data.data
      })
    },
    delOption() {
      this.delParams.accessToken = this.token
      apiDecorateMange.delAds(this.delParams).then(data => {
        if (data.code != 200) return
        this.$toast('删除成功', () => {
          this.delPanel = false
          this.changePage(1)
        })
      })
    },
    changePage(page) {
      this.queryAds.currentPage = page
      this._getAdsList()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.e-filter-options {
  border-bottom: 1px solid $border-gray-light;
  padding-bottom: 20px;
}
.e-item {
  margin-left: 0;
  margin-right: 20px;
  .title {
    width: 76px;
  }
  .dis-block {
    width: 240px;
    vertical-align: middle;
  }
}
.e-filter-list {
  width: 100%;
  .e-add {
    margin: 20px 0;
  }
}
</style>